<template>
    <div class="playingLists">
        <div class="title">
            <p>播放列表</p>
            <p>{{ musicPlay2.laterMusic.length }}首歌曲</p>
        </div>
        <div class="musicLists">
            <div class="musicLists2" v-for="(lists, index) in musicPlay2.laterMusic" :key="index"
                :class="{ 'playingIt': lists.id == musicPlay2.id }">
                <div class="musicLists3">
                    <p style="margin-bottom: 5px;">{{ lists.name }}</p>
                    <p style="margin-top: 5px;">{{ lists.ar[0].name }}</p>
                </div>
                <div class="musicLists4">
                    <ul>
                        <!-- 暂停 -->
                        <li v-show="(!musicPlay2.audioPlay && (musicPlay2.id == lists.id)) || (musicPlay2.id != lists.id)"
                            @click="stopOrPlay(lists, index)">
                            <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g id="Media / Play">
                                    <path id="Vector"
                                        d="M5 17.3336V6.66698C5 5.78742 5 5.34715 5.18509 5.08691C5.34664 4.85977 5.59564 4.71064 5.87207 4.67499C6.18868 4.63415 6.57701 4.84126 7.35254 5.25487L17.3525 10.5882L17.3562 10.5898C18.2132 11.0469 18.642 11.2756 18.7826 11.5803C18.9053 11.8462 18.9053 12.1531 18.7826 12.4189C18.6418 12.7241 18.212 12.9537 17.3525 13.4121L7.35254 18.7454C6.57645 19.1593 6.1888 19.3657 5.87207 19.3248C5.59564 19.2891 5.34664 19.1401 5.18509 18.9129C5 18.6527 5 18.2132 5 17.3336Z"
                                        stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </g>
                            </svg>
                        </li>
                        <!-- 开始 -->
                        <li v-show="musicPlay2.audioPlay && (musicPlay2.id == lists.id)" @click="stopOrPlay(lists, index)">
                            <svg width="40px" height="40px" viewBox="0 0 24 24" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>Pause</title>
                                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g id="Pause">
                                        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="24" height="24">

                                        </rect>
                                        <rect id="Rectangle" stroke="#0C0310" stroke-width="2" stroke-linecap="round" x="15"
                                            y="5" width="3" height="14" rx="1.5">

                                        </rect>
                                        <rect id="Rectangle" stroke="#0C0310" stroke-width="2" stroke-linecap="round" x="6"
                                            y="5" width="3" height="14" rx="1.5">

                                        </rect>
                                    </g>
                                </g>
                            </svg>
                        </li>
                        <!-- 未收藏 -->
                        <li>
                            <svg fill="#000000" height="30px" width="30px" version="1.1" id="Layer_1"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                viewBox="0 0 512 512" xml:space="preserve">
                                <g>
                                    <g>
                                        <path d="M365.714,3.47c-42.487,0-82.143,18.18-109.714,49.502C228.428,21.65,188.772,3.47,146.286,3.47
			C65.624,3.47,0,69.094,0,149.756c0,33.752,11.776,66.69,33.157,92.744L256,508.53l222.743-265.909l0.1-0.121
			C500.224,216.445,512,183.508,512,149.756C512,69.094,446.376,3.47,365.714,3.47z M454.661,222.553L256,459.713L57.339,222.553
			c-16.762-20.454-25.992-46.303-25.992-72.797c0-63.377,51.562-114.939,114.939-114.939c39.149,0,75.245,19.652,96.558,52.57
			L256,107.708l13.156-20.321c21.313-32.917,57.409-52.57,96.558-52.57c63.377,0,114.939,51.562,114.939,114.939
			C480.653,176.25,471.423,202.099,454.661,222.553z" />
                                    </g>
                                </g>
                            </svg>

                        </li>
                        <!-- 已收藏 -->
                        <li v-show=false>
                            <svg height="30px" width="30px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
                                <path style="fill:#FF7855;" d="M139.13,8.348C62.29,8.348,0,70.639,0,147.478c0,33.479,11.828,64.194,31.529,88.201L256,503.652
	l33.391-215.841L256,71.969C231.214,33.685,188.133,8.348,139.13,8.348z" />
                                <path style="fill:#FF562B;" d="M372.87,8.348c-49.003,0-92.083,25.336-116.87,63.62v431.684L480.471,235.68
	C500.172,211.673,512,180.959,512,147.478C512,70.639,449.71,8.348,372.87,8.348z" />
                            </svg>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer">
            <svg width="40px" height="40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;"
                @click="hiddenIt">
                <title />
                <g id="Complete">
                    <g id="align-right">
                        <g>
                            <polygon fill="#ffffff" points="19.9 18 11.1 18 11.1 18 19.9 18 19.9 18" stroke="#000000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />

                            <polygon fill="#ffffff" points="20 14 4 14 4 14 20 14 20 14" stroke="#000000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />

                            <polygon fill="#ffffff" points="19.9 10 11.1 10 11.1 10 19.9 10 19.9 10" stroke="#000000"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />

                            <polygon fill="#ffffff" points="20 6 4 6 4 6 20 6 20 6" stroke="#000000" stroke-linecap="round"
                                stroke-linejoin="round" stroke-width="2" />
                        </g>
                    </g>
                </g>
            </svg>
        </div>
    </div>
</template>

<script setup lang="ts">
import { GetAllDetailMusics } from '@/models/musciLists'
import { musicPlay2, musicStore2 } from '@/utils/playMusic'

const stopOrPlay = (lists: GetAllDetailMusics, index: number) => {
    musicPlay2.SameOrDif(lists, index)
}


/* 接收父亲的参数 */
const getFater = defineProps({
    hidden: {
        type: Boolean
    }
})

/* 子传父 */
const postHidden = defineEmits(["getHidden"])
const hiddenIt = () => {
    let hidden = !getFater.hidden
    postHidden("getHidden", hidden)
}

</script>

<style lang="scss" scoped>
.playingLists {
    width: 400px;
    background-color: white;
    box-shadow: 1px 1px 5px 3px var(--brShadow);
    border-left: 1px solid var(--brShadow);
    padding-top: var(--playingLists);
    display: grid;
    grid-template-rows: 90px 1fr 70px;
    z-index: 10;

    .title {
        padding-left: var(--playingLists);

        p {
            margin-bottom: 15px;

            &:first-child {
                font-size: 20px;

            }
        }
    }

    .musicLists {
        overflow: scroll;

        .musicLists2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 80px;
            padding-left: var(--playingLists);
            // background-color: aquamarine;

            .musicLists4 {
                padding-right: 15px;

                ul {
                    display: flex;
                    align-items: center;

                    li {
                        cursor: pointer;
                        margin-right: 10px;
                    }
                }
            }

            &:hover {
                background-color: var(--playingListsHover);
            }
        }
    }

    .footer {
        display: flex;
        justify-content: end;
        align-items: center;
        padding-right: 40px;
    }
}

.stopMusic {
    display: none;
}

.love {
    display: none;
}
</style>